বুটস্ট্রাপ গ্রীড সিস্টেমের মাধ্যমে একটি পেজকে ১২টি কলাম পর্যন্ত ভাগ করা যায়।
আপনার যদি ১২ কলাম একসাথে প্রয়োজন না হয়, তাহলে আপনি চাইলে বেশি প্রশস্থের বিভিন্ন কম্বিনেশনে কলাম গ্রুপ তৈরি করে নিতে পারেনঃ
span 12 | |||||||||||
span 6 | span 6 | ||||||||||
span 4 | span 8 | ||||||||||
span 4 | span 4 | span 4 | |||||||||
span 1 | span 1 | span 1 | span 1 | span 1 | span 1 | span 1 | span 1 | span 1 | span 1 | span 1 | span 1 |
বুটস্ট্রাপের গ্রীড সিস্টেম রেসপন্সিভ এবং স্ক্রিনের আকারের উপর নির্ভর করে কলামগুলো বিন্যাসিত হয়: বড় স্ক্রিনে হয়তো একটি কন্টেন্ট ৩ কলামে পাশাপাশি দেখতে ভাল লাগে, কিন্তু ঐ কন্টেন্টই ছোট স্ক্রিনে নিচে নিচে দেখালে দেখতে ভাল লাগবে।
বুটস্ট্রাপ গ্রীড সংক্রান্ত চারটি ক্লাস রয়েছেঃ
অধিক ডায়নামিক এবং ফ্লেক্সিবল লে-আউট তৈরি করার জন্য উপরের ক্লাস গুলো একত্রে বিভিন্ন কম্বিনেশনে ব্যবহার করা যায়।
টিপসঃ আপনি যদি xs, sm এবং md আকারের ডিভাইসের জন্য একই লে-আউট নির্ধারন করতে চান, তাহলে শুধুমাত্র xs এর জন্য লে-আউট নির্ধারণ করলেই সকল স্ক্রিনে একই রকম দেখাবে।
বুটস্ট্রাপ গ্রীড সিস্টেমের কিছু রুলসঃ
.row
কে অবশ্যই .container
(fixed-width) অথবা .container-fluid
(full-width) এর মধ্যে রাখতে হবে।.row
এবং .col-sm-4
মাধ্যমে সহজে এবং দ্রুততার সহিত গ্রীড লে-আউট তৈরি করা যায়।.rows
এর প্রথম এবং শেষ কলামে নেগেটিভ মার্জিন ব্যবহৃত হয়।.col-sm-4
ক্লাস ব্যবহার করতে হবে।নিচে বুটস্ট্রাপ গ্রীডের একটি বেসিক গঠন দেখানো হলোঃ
kt_satt_skill_example_id=1210
তাহলে, আপনি যে লে-আউট চান সেটি তৈরি করার জন্য প্রথমে একটি কন্টেইনার তৈরি করুন (< div class="container" >
)। তারপর, একটি সারি(row) তৈরি করুন (< div class="row" >
)। তারপর প্রয়োজন অনুযায়ী কলামের সংখ্যা যুক্ত করুন। ( .col-*-*
ক্লাসের সাহায্য)। মনে রাখবেন প্রতি সারিতে সর্বোচ্চ ১২টি কলাম যুক্ত করতে পারবেন।
নিম্নলিখিত টেবিলে দেখানো হলো কিভাবে বিভিন্ন ডিভাইসে বুটস্ট্রাপ গ্রীড সিস্টেম কাজ করেঃ
অতি ছোট ডিভাইস ফোন (<768px) | ছোট ডিভাইস ট্যাবলেট (>=768px) | মিডিয়াম ডিভাইস ডেস্কটপ (>=992px) | বৃহদাকার ডিভাইস বড় ডেস্কটপ (>=1200px) | |
---|---|---|---|---|
গ্রীডের আচরন | সবক্ষেত্রেই আনুভূমিক হয় | Collapsed to start, horizontal above breakpoints | Collapsed to start, horizontal above breakpoints | Collapsed to start, horizontal above breakpoints |
Container width | নেই (auto) | 750px | 970px | 1170px |
Class prefix | .col-xs- | .col-sm- | .col-md- | .col-lg- |
Number of columns | 12 | 12 | 12 | 12 |
Column width | Auto | ~62px | ~81px | ~97px |
গাটারের প্রশস্ততা | 30px (প্রতি কলামের উভয়পাশে 15px করে) | 30px (প্রতি কলামের উভয়পাশে 15px করে) | 30px (প্রতি কলামের উভয়পাশে 15px করে) | 30px (প্রতি কলামের উভয়পাশে 15px করে) |
নেস্টেবল | হ্যাঁ | হ্যাঁ | হ্যাঁ | হ্যাঁ |
অফসেট | হ্যাঁ | হ্যাঁ | হ্যাঁ | হ্যাঁ |
কলাম ওর্ডারিং | হ্যাঁ | হ্যাঁ | হ্যাঁ | হ্যাঁ |
পরবর্তী অধ্যায়গুলোতে বিভিন্ন ডিভাইসের জন্য গ্রীড সিস্টেমের উদাহরণ দেয়া হয়েছে:
বুটস্ট্রাপ গ্রীডঃ এখানে আমরা একটি বেসিক গ্রীড লে-আউট তৈরি করবো যেটি মোবাইল এবং ট্যাবলেটের ক্ষেত্রে কলামগুলো নিচে নিচে দেখাবে এবং ডেস্কটপের ক্ষেত্রে (মিডিয়াম/বড় ডিভাইস) এটি আনুভূমিক(horizontal) বা পাশাপাশি দেখাবে ভাবে দেখাবে।
নিচের উদাহরণে একটি সরল "stacked-to-horizontal" উদাহরণ দেখানো হলো। যেটি দুই কলাম বিশিষ্ট একটি সাধারণ লে-আউট। এই উদাহরণের দুটি কলাম একদম ছোট স্ক্রিন ব্যতিত অন্য সকল স্ক্রিনেই ৩৩.৩%/৬৬.৬% আনুভূমিক লে-আউটে প্রদর্শিত হবে। অর্থাৎ একদম ছোট স্ক্রিনে প্রত্যেকটি কলাম ১০০% জায়গা নিয়েই প্রদর্শিত হবেঃ
kt_satt_skill_example_id=1213
টিপসঃ এছাড়াও আপনার প্রয়োজন মতো .container
এর পরিবর্তে .container-fluid
ক্লাসও ব্যবহার করতে পারেনঃ
kt_satt_skill_example_id=1215
মনে করুন, আমাদের কাছে দুটি কলাম যুক্ত একটি সাধারণ লে-আউট রয়েছে। এবং আমরা চাই যে লে-আউটটি ছোট ডিভাইসের ক্ষেত্রে দুটি কলামের জন্য যথাক্রমে ৫০% এবং ৫০% অনুপাতে ভাগ হবে।
টিপসঃ ছোট ডিভাইস বলতে ৭৬৮ পিক্সেল থেকে ৯৯২ পিক্সেল রেজুলেশনের স্ক্রিনযুক্ত ডিভাইসকে(মূলত ট্যাবলেট) বুঝায়।
ছোট ডিভাইসের জন্য আমরা .col-sm-*
ক্লাস ব্যবহার করবো।
উপরে যে দুটি কলামের কথা বলা হয়েছে তার জন্য আমরা নিম্নলিখিত ক্লাসগুলো ব্যবহার করিঃ
kt_satt_skill_example_id=1219
এই উদাহরণটি ছোট (এবং মিডিয়াম এবং বড়) স্ক্রিনের জন্য ৫০% এবং ৫০% অনুপাতে দুটি কলাম তৈরি করবে। অতিরিক্ত ছোট ডিভাইসে(মোবাইল) কলামগুলো নিচে নিচে অবস্থান করবে। অর্থাৎ মোবাইল স্ক্রিনের ক্ষেত্রে প্রত্যেকটি কলাম স্বয়ংক্রিয়ভাবে ১০০% প্রস্থ নিয়ে নেবেঃ
kt_satt_skill_example_id=1221
নোটঃ এটা নিশ্চিত করুন যে কলামের যোগফল ১২টি যৌক্তিক কলামের বেশি নয়।
২৫%/৭৫% অনুপাতে কলামের জন্য .col-sm-3
এবং .col-sm-9
ক্লাস ব্যবহার করুনঃ
kt_satt_skill_example_id=1223
মিডিয়াম ডিভাইসের জন্য কিভাবে ভিন্ন অনুপাতের কলাম তৈরি করা যায় তা পরবর্তী অধ্যায়ে দেখানো হয়েছে।
বুটস্ট্রাপ গ্রীড: পূর্ববর্তী অধ্যায়ে আমরা ছোট ডিভাইসের জন্য গ্রীড উদাহরণ দেখিয়েছি। 50%/50 অনুপাতে ভাগ করার জন্য আমরা দুটি div
ব্যবহার করেছি:
kt_satt_skill_example_id=1254
মিডিয়াম ডিভাইসে হয়তো ডিজাইনটি 33.3%/66.6% অনুপাতে ভাল হবে।
টিপস: ছোট ডিভাইস বলতে ৯৯২ পিক্সেল থেকে ১১৯৯ পিক্সেল রেজুলেশনের স্ক্রিনযুক্ত ডিভাইসকে বুঝায়।
মিডিয়াম ডিভাইসের জন্য আমরা .col-md-*
ক্লাস ব্যবহার করবো।
এখন আমরা মিডিয়াম ডিভাইসের জন্য কলাম প্রস্থ যুক্ত করবো:
kt_satt_skill_example_id=1255
এক্ষেত্রে ছোট ডিভাইসের জন্য col-sm-*
ক্লাস গুলো কাজ করবে এবং মিডিয়াম ডিভাইসের জন্য col-md-*
ক্লাস কাজ করবে।
এই উদাহরণে আমরা ছোট ডিভাইসের জন্য 50%/50% এবং মিডিয়াম ডিভাইসের জন্য 33.3%/66.6% অনুপাতে কলাম তৈরি করবো। কিন্তু অতিরিক্ত ছোট (মোবাইল) ডিভাইসের ক্ষেত্রে কলামগুলো নিচে নিচে দেখাবে। কারন মোবাইল ডিভাইসের জন্য আমরা কলাম লে-আউট নির্দিষ্ট করে দেইনি:
kt_satt_skill_example_id=1256
নোটঃ এটা নিশ্চিত করুন যে কলামগুলোর যোগফল ১২ এর বেশি নয়!
এই উদাহরণে শুধুমাত্র .col-md-4
এবং .col-md-8
ক্লাস নির্দিষ্ট করে দিয়েছি (.col-sm-*
ব্যাতীত)। এর মানে মিডিয়াম এবং বড় ডিভাইসে 50%/50% অনুপাতে কলাম তৈরি হবে কারন কলাম ক্লাসগুলো ছোট ডিভাইসের ক্লাসগুলোকে বেশি প্রাধান্য দেয়। এক্ষেত্রে ছোট দুটি ডিভাইসে কলামগুলো ভার্টিক্যাল আকারে দেখাবেঃ
kt_satt_skill_example_id=1257
বড় ডিভাইসের জন্য কিভাবে ভিন্ন অনুপাতের কলাম তৈরি করা যায় তা পরবর্তী অধ্যায়ে দেখানো হয়েছে।
বুটস্ট্রাপ গ্রীড: পূর্ববর্তী অধ্যায়ে আমরা ছোট ও মাঝারি ডিভাইসের জন্য ক্লাস দ্বারা একটি গ্রীড উদাহরণ তৈরি করেছিলাম। আমরা সেখানে দুইটি div (কলাম) ব্যবহার করেছি এবং তাদের ছোট ডিভাইসে 50%/50% কলামে এবং মাঝারি ডিভাইসে 33.3%/66.6% কলামে বিভক্ত করেছিঃ
kt_satt_skill_example_id=1259
কিন্তু বড় ডিভাইসের ডিজাইনের ক্ষেত্রে লে-আউটটি 25%/75% লে-আউটে বিভক্ত হলে ভাল দেখাবে।
টিপসঃ বড় ডিভাইস বলতে ১২০০ পিক্সেল বা তার বেশি রেজুলেশনের স্ক্রিন যুক্ত ডিভাইসকে বুঝায়।
বড় ডিভাইসের জন্য আমরা .col-lg-*
ক্লাস ব্যবহার করবো।
সুতরাং এখন আমরা বড় ডিভাইসের জন্য কলাম প্রস্থ নির্ধারন করবোঃ
kt_satt_skill_example_id=1260
এক্ষেত্রে ছোট ডিভাইসের জন্য col-sm-*
ক্লাস, মিডিয়াম ডিভাইসের জন্য col-md-*
ক্লাস এবং বড় ডিভাইসের জন্য col-lg-*
ক্লাস কাজ করবে।
নিম্নলিখিত উদাহরণে ছোট ডিভাইসের জন্য 50%/50% কলাম, মাঝারি ডিভাইসের জন্য 33.%/66.6% কলাম, এবং বড় ডিভাইসের 25%/75% কলাম তৈরি করা হয়েছেঃ
kt_satt_skill_example_id=1262
নিচের উদাহরণে, আমরা শুধুমাত্র .col-lg-6
ক্লাস উল্লেখ করেছি (.col-md-*
এবং/অথবা .col-sm-*
ছাড়া)। এর মানে হল যে বড় ডিভাইসে কলামগুলো ৫০%/৫০% অনুপাতে বিভক্ত হবে। কিন্তু, মিডিয়াম ও ছোট ডিভাইসের ক্ষেত্রে কলামগুলো নিচে নিচে অবস্থান করবে। কারন আমরা মিডিয়াম এবং ছোট ডিভাইসের জন্য কলাম লে-আউট উল্লেখ করিনিঃ
kt_satt_skill_example_id=1263
এই পেজের মধ্যে আমরা বুটস্ট্রাপ গ্রীড লে-আউটের কিছু বেসিকে উদাহরণ দেয়ার চেষ্টা করেছি।
নিম্নলিখিত উদাহরণে দেখানো হয়েছে যে ছোট স্ক্রিনের জন্য কিভাবে সমান প্রস্থ বিশিষ্ট তিনটি কলাম তৈরি করা যায়, যা মিডিয়াম এবং বড় স্ক্রিনের জন্য একই ভাবে কাজ করবে। কিন্তু মোবাইল ফোনের ক্ষেত্রে কলামগুলো নিচে নিচে অবস্থান করবেঃ
kt_satt_skill_example_id=1268
নিম্নলিখিত উদাহরণে দেখানো হয়েছে যে ছোট স্ক্রিনের জন্য কিভাবে ভিন্ন প্রস্থ বিশিষ্ট তিনটি কলাম তৈরি করা যায়, যা মিডিয়াম এবং বড় স্ক্রিনের জন্য একই ভাবে কাজ করবেঃ
kt_satt_skill_example_id=1270
নিম্নলিখিত উদাহরণে দেখানো হয়েছে যে ছোট স্ক্রিনের জন্য কিভাবে ভিন্ন প্রস্থ বিশিষ্ট দুইটি কলাম তৈরি করা যায়, যা মিডিয়াম এবং বড় স্ক্রিনের জন্য একই ভাবে কাজ করবেঃ
kt_satt_skill_example_id=1272
নিম্নলিখিত উদাহরণে দেখানো হয়েছে যে ছোট স্ক্রিনের জন্য কিভাবে ভিন্ন প্রস্থ বিশিষ্ট দুইটি কলাম তৈরি করা যায়, যা মিডিয়াম এবং বড় স্ক্রিনের জন্য একই ভাবে কাজ করবে। দুটি কলামের মধ্যে বড় কলামটিকে আবার সমান দুই ভাগে ভাগ করা হয়েছে। মোবাইল ডিভাইসের ক্ষেত্রে সবগুলো কলামই নিচে নিচে অবস্থান করবেঃ
kt_satt_skill_example_id=1274
বুটস্ট্রাপ গ্রীড সিস্টেমে চারটি ক্লাস রয়েছে: xs(মোবাইল), sm(ট্যাবলেট), md(ডেস্কটপ) and lg(বড় ডেস্কটপ)। ডাইনামিক ও ফ্লেক্সিবল লে-আউট তৈরি করার ক্ষেত্রে ক্লাসগুলো একত্রে ব্যবহার করা যায়।
টিপস: বুটস্ট্রাপ গ্রীড সিস্টেমে ছোট ক্লাসগুলোকে বেশি প্রাধান্য দেয়া হয়েছে। আপনি যদি xs এবং sm ক্লাসে একই লে-আউট পেতে চান তাহলে শুধুমাত্র xs ক্লাস উল্লেখ করলেই হবে।
kt_satt_skill_example_id=1276
kt_satt_skill_example_id=1278
নির্দিষ্ট ব্রেকপয়েন্টে অদ্ভুত wrapping প্রতিরোধ করতে ফ্লোট ক্লিয়ার করুন(.clearfix
ক্লাসের মাধ্যমে):
kt_satt_skill_example_id=1279
কলামকে ডানদিকে সরিয়ে নেয়ার জন্য .col-*-offset-*
ক্লাস ব্যবহার করুন। এটি কলামের বাম দিকের মার্জিন বৃদ্ধি(কলামের প্রস্থের সমান) করেঃ
kt_satt_skill_example_id=1280
গ্রীড কলামের ক্রম পরিবর্তন করার জন্য .col-*-push-*
ক্লাস ব্যবহার করুনঃ
kt_satt_skill_example_id=1282
আরও দেখুন...